<template>
    <div class="video-player" :style="{ width: width + 'px', height: height + 'px'}">
        <!-- 默认主窗口 -->
        <div class="main-box" :style="{width: mainData.width + 'px', height: mainData.height + 'px','z-index': mainData.zIndex}">
            <div class="container">
                <!-- 视频容器 -->
                <div class="play-container" ref="mainEl"></div>
                <!-- 视频上方透明蒙层 -->
                <div :class="['mask', clickKey === 'main' ? 'free-click' : '']" @click="switchToMain" ></div>
            </div>
        </div>
        <!-- 默认副窗口 -->
        <div class="sub-box" :style="{width: subData.width + 'px', height: subData.height + 'px','z-index': subData.zIndex}">
            <div class="container">
                <!-- 视频容器 -->
                <div class="play-container" ref="subEl"></div>
                <!-- 视频上方透明蒙层 -->
                <div :class="['mask', clickKey === 'sub' ? 'free-click' : '']"  @click="switchToMain" ></div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'HLSPlayer',
    props: ['mainVideo', 'subVideo'],
    data: () => ({
        width: 800, // 默认视频框宽度
        height: 600, // 默认视频框高度
        clickKey: 'sub',
        mainData: { // 主视频数据
            width: 800, // 主视频宽度
            height: 600, // 主视频高度
            zIndex: 1, // 主视频div z-index
            pointerEvents: 'none', // 主视频是否响应鼠标点击事件
        },
        subData: {
            width: 300,
            height: 150,
            zIndex: 2,
            pointerEvents: 'all',
        },
    }),
    watch: {
        mainVideo: {
            handler(newVal, oldVal) {
                if (newVal) {
                    this.mainData = newVal;
                    this.mainData.zIndex = 1;
                    this.mainData.pointerEvent = 'none';

                    this.width = this.mainData.width;
                    this.height = this.mainData.height;
                    this.clickKey = 'sub';

                    if (this.mainPlayer && oldVal.videoSrc !== newVal.videoSrc) { // 判断是否更新视频源
                        this.mainPlayer.changeSrc(newVal.videoSrc);
                    }
                }
            },
            deep: true,
            immediate: true,
        },
        subVideo: {
            handler(newVal, oldVal) {
                if (newVal) {
                    this.subData = newVal;
                    this.subData.zIndex = 2;
                    this.subData.pointerEvent = 'all';

                    if (this.subPlayer && oldVal.videoSrc !== newVal.videoSrc) { // 判断是否更新视频源
                        this.subPlayer.changeSrc(newVal.videoSrc);
                    }
                }
            },
            deep: true,
            immediate: true,
        },
    },
    mounted() {
        this.$nextTick(() => {
            this.initVideo();
        });
    },
    methods: {
        /**
         * @description 初始化主副视频
         */
        initVideo() {
            this.mainPlayer && this.mainPlayer.destroy();
            this.subPlayer && this.subPlayer.destroy();
            // 主视频 DOM 容器
            const mainEl = this.$refs.mainEl || null;
            // 视频源
            const mainSrc = this.mainData.videoSrc || null;
            // 视频播放依赖库
            const libPath = `${window.location.href}static/player/lib/`;

            this.mainPlayer = new GoldPlay(mainEl, {
                sourceURL: mainSrc,
                type: 'HLS',
                libPath,
                playBackRate: 1,
                preload: true,
                autoPlay: false,
            });

            const subEl = this.$refs.subEl || null;
            const subSrc = this.subData.videoSrc || null;

            this.subPlayer = new GoldPlay(subEl, {
                sourceURL: subSrc,
                type: 'HLS',
                libPath,
                playBackRate: 1,
                preload: true,
                autoPlay: false,
                controlBarAutoHide: true,
            });

            this.hideFullPageComponent(this.mainPlayer, this.subPlayer);

            this.rewritePlay(this.mainPlayer, this.subPlayer);
            this.rewritePause(this.mainPlayer, this.subPlayer);
            this.rewriteChangeSpeed(this.mainPlayer, this.subPlayer);
            this.rewriteSeek(this.mainPlayer, this.subPlayer);
        },
        /**
         * @description 切换主父视频接口
         */
        switchToMain() {
            const tempData = this.mainData;
            this.mainData = this.subData;
            this.subData = tempData;

            if (this.clickKey === 'main') {
                this.clickKey = 'sub';
            } else {
                this.clickKey = 'main';
            }

            this.updateVideoBoxSize();
        },

        /**
         * @description 更新视频框大小
         */
        updateVideoBoxSize() {
            const mainSize = {
                width: this.mainData.width,
                height: this.mainData.height,
            };
            const subSize = {
                width: this.subData.width,
                height: this.subData.height,
            };
            const context = this.mainPlayer.componentsController.fullPage;
            const context2 = this.subPlayer.componentsController.fullPage;

            this.$nextTick(() => {
                this.changeSize(mainSize, context);
                this.changeSize(subSize, context2);
            });
        },

        /**
         * @description 更新视频窗大小
         * @param {Object} size = {width: xx, height: xx}
         * @param {FullPage} fullPage 实例对象
         */
        changeSize(size, context) {
            context.saveOriginPosition();
            context.resizeTo(size.width, size.height);
            context.resetPosition();
            scrollTo(0, 0);
        },

        /**
         * @description 重写 player的 play方法
         * @param {Player} context  主播放器实例
         * @param {Player} context2 副播放器实例
         */
        rewritePlay(context, context2) {
            const oldPlay = context.play;
            context.play = () => {
                oldPlay.apply(context);
                context2.play();
            };
        },
        /**
         * @description 重写 player的pause方法
         * @param {Player} context  主播放器实例
         * @param {Player} context2 副播放器实例
         */
        rewritePause(context, context2) {
            const oldPause = context.pause;
            context.pause = () => {
                oldPause.apply(context);
                context2.pause();
            };
        },
        /**
         * @description 重写 player的changeSpeed方法
         * @param {Player} context  主播放器实例
         * @param {Player} context2 副播放器实例
         */
        rewriteChangeSpeed(context, context2) {
            const oldChangeSpeed = context.changeSpeed;
            context.changeSpeed = (arg) => {
                oldChangeSpeed.call(context, arg);
                context2.changeSpeed(arg);
            };
        },

        /**
         * @description 重写 player的seek方法
         * @param {Player} context  主播放器实例
         * @param {Player} context2 副播放器实例
         */
        rewriteSeek(context, context2) {
            const oldSeek = context.seek;
            context.seek = (arg) => {
                oldSeek.call(context, arg);
                context2.seek(arg);
                console.warn(arg, context.seekSegmentNo);
            };
        },

        /**
         * @description 重写全屏
         * @param {Player} 播放器实例
         */
        rewriteFullScreen() {
        },

        /**
         * @description 隐藏fullPage 按钮
         * 本视频有fullPage 和 fullScreen 按钮，保留fullScreen 就行， 因此隐藏fullPage
         * @param {Player} context  主播放器实例
         * @param {Player} context2 副播放器实例
         */
        hideFullPageComponent(context, context2) {
            const fullPage = context.componentsController.fullPage || null;
            const fullPage2 = context2.componentsController.fullPage || null;
            fullPage.watch = () => {}; // 置空原始监听方法
            fullPage2.watch = () => {}; // 置空原始监听方法
            fullPage && (fullPage.data.fullpageHide = 'none');
            fullPage2 && (fullPage2.data.fullpageHide = 'none');
        },
    },
};
</script>
<style lang="scss" scoped>
.video-player {
    position: relative;
    width: 100%;
    height: 100%;

    .main-box {
        position: absolute;
        box-sizing: border-box;
        border: 1px solid red;
        margin-left: 100%;
        background-color: #000;
        transform: translateX(-100%);

        .container {
            position: relative;
            width: 100%;
            height: 100%;

            .play-container {
                width: 100%;
                height: 100%;
            }

            .mask {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                cursor: pointer;
                pointer-events: none;
                z-index: 9999;
            }

            .free-click {
                pointer-events: all;
            }
        }
    }

    .sub-box {
        @extend .main-box;

        border: 1px solid green;
    }
}
</style>
